@model WalkingTec.Mvvm.Doc.ViewModels.StudentVms.StudentListVm
<style>
    a {
        color: #01aaed
    }
</style>
<wt:fieldset field-set-style="Simple" title="Grid">
 </wt:fieldset>
   <p>Using grid control provided by framework to output list quickly</p>
    <table lay-filter="parse-table-demo">
        <thead>
            <tr>
                <th lay-data="{field:'username', width:200}">Property</th>
                <th lay-data="{field:'joinTime', width:600}">Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Id</td>
                <td>Control ID,generated by binding field name by default, not required</td>
            </tr>
            <tr>
                <td>Vm</td>
                <td>Binding field,  must be a class inheriting BasePagedListVM, required</td>
            </tr>
            <tr>
                <td>SearchPanelId</td>
                <td>ID matching search box, generated by binding field name by default,not required</td>
            </tr>
            <tr>
                <td>HiddenPanel</td>
                <td>hide the panel outside the list,or not</td>
            </tr>
            <tr>
                <td>HiddenCheckbox</td>
                <td>Hide the check box in the first column of the list,or not</td>
            </tr>
            <tr>
                <td>HiddenGridIndex</td>
                <td>Hide list sequence number,or not</td>
            </tr>
            <tr>
                <td>CheckedAll</td>
                <td>Select all,or not</td>
            </tr>
            <tr>
                <td>CheckboxIndex</td>
                <td>Currently selected row</td>
            </tr>
            <tr>
                <td>Width</td>
                <td>List width</td>
            </tr>
            <tr>
                <td>Height</td>
                <td>List height</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Render the list directly with data without reading the data from the server</td>
            </tr>
            <tr>
                <td>UseLocalData</td>
                <td>Get data directly from EntityList of ListVM</td>
            </tr>
            <tr>
                <td>Height</td>
                <td>List height</td>
            </tr>
            <tr>
                <td>MultiLine</td>
                <td>Automatically wrap cells, ,Default=no</td>
            </tr>
        </tbody>
    </table>

    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="Effect" />
            <wt:tabheader title="Code" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent >
                <wt:grid vm="@Model" use-local-data="true" height="300"/>
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
&ltwt:grid vm="@@Model" use-local-data="true" /&gt
                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>
    <wt:quote>
        <p>The front-end code to display Grid is very simple, the complex logic is in the ListVM it binds to. For example, to set the column, button, and editable of the list to be displayed in the ListVM. please refer to <a href="/#/VM/List">ListVM</a></p>
    </wt:quote>

<wt:fieldset field-set-style="Simple" title="SearchPanel">
</wt:fieldset>
    <p>Searchpanel is matched with grid to display the search criteria</p>
    <table lay-filter="parse-table-demo">
        <thead>
            <tr>
                <th lay-data="{field:'username', width:200}">Property</th>
                <th lay-data="{field:'joinTime', width:600}">Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Id</td>
                <td>Control ID,generated by binding field name by default; not required</td>
            </tr>
            <tr>
                <td>Vm</td>
                <td>Binding field,  must be a class inheriting BasePagedListVM, required</td>
            </tr>
            <tr>
                <td>GridId</td>
                <td>Matching GridId, generated by default according to the binding field name,not required</td>
            </tr>
            <tr>
                <td>SearchBtnId</td>
                <td>Search button ID, not required</td>
            </tr>
            <tr>
                <td>ResetBtnId</td>
                <td>Reset button ID, not required</td>
            </tr>
            <tr>
                <td>ResetBtn</td>
                <td>Show reset button, or not</td>
            </tr>
        </tbody>
    </table>

    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="Effect" />
            <wt:tabheader title="Code" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent >
                <wt:searchpanel vm="@Model" reset-btn="true" grid-id="gg2">
                    <wt:row items-per-row="ItemsPerRowEnum.Three">
                        <wt:textbox field="Searcher.LoginName" />
                        <wt:textbox field="Searcher.Name" />
                        <wt:combobox field="Searcher.IsValid" empty-text="全部" />
                    </wt:row>
                </wt:searchpanel>
                <wt:grid vm="@Model"  id="gg2" height="400"/>
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
&ltwt:searchpanel vm="@@Model" reset-btn="true"&gt
    &ltwt:row items-per-row="ItemsPerRowEnum.Three"&gt
        &ltwt:textbox field="Searcher.LoginName" /&gt
        &ltwt:textbox field="Searcher.Name" /&gt
        &ltwt:combobox field="Searcher.IsValid" empty-text="全部" /&gt
    &lt/wt:row&gt
&lt/wt:searchpanel&gt
&ltwt:grid vm="@@Model"  /&gt
                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>
    <wt:quote>
        <p>Searchpanel can use all kinds of controls and typesetting, just like normal form. Its function is to bind all kinds of query conditions in searcher in listvm and pass the query conditions to background methods</p>
        <p>If some variables in the searcher of listvm have been assigned in controller before page presentation, then there is no need to write searchpanel in the foreground, and grid will search according to the assigned search criteria. This method is very suitable for displaying a list with fixed search criteria.</p>
    </wt:quote>

<script>
layui.use('code',function(){layui.code({ about: false })})
        layui.table.init('parse-table-demo', {
        limit: 100, page: false
        });
</script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
